<template>
  <div>
    <h1>toRef（）和toRefs（）</h1>    
    <p>name:{{name}}</p>
    <p>age:{{age}}</p>
    <input type="button" value="修改age" @click="changeAge">
    <hr/>
    <p>bookReactive.price:{{bookReactive.price}}</p>
    <p>priceRef:{{priceRef}}</p>
    <input type="button" value="修改price" @click="changePrice">
  </div>
</template>

<script setup>
import {reactive,toRef, toRefs} from "vue"

// 一、 toRefs()
let personReactive = reactive({
  name:"李晨光",
  age:12
})

// toRefs把一个响应式对象的每个属性变成响应式的
let {name,age} = toRefs(personReactive);

console.log("name.value",name.value);
console.log("age.value",age.value);

function changeAge(){
  age.value++;
  console.log("age.value",age.value);
}

// 二、toRef();
let bookReactive = reactive({
  name:"如何让富婆爱上我",
  price:125
});

let priceRef = toRef(bookReactive,"price");//把响应式对象bookReactive的price属性变成响应式对象，返回值和源对象的属性有关联。

console.log("priceRef",priceRef);

function changePrice(){
  priceRef.value ++;
  console.log("priceRef.value",priceRef.value);
  console.log("bookReactive.price",bookReactive.price);//bookReactive.price 和priceRef.value是关联在一起了。
}

</script>

<style scoped>

</style>